<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>表单和图片</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
</head>
<body>
 <!--基本表单样式-->
 <form>
     <div class="form-group"> <!--form-inline内联表单-->
         <label>电子邮件</label>
         <input type="email" class="form-control"
                placeholder="请输入您的电子邮件">
     </div>
     <div class="form-group">
         <label>密码</label>
         <input type="password" class="form-control"
                placeholder="请输入您的密码">
     </div>
 </form>
 <!--前后增加片段-->
 <div class="input-group">
     <div class="input-group-addon">￥</div>
     <input type="text" class="form-control">
     <div class="input-group-addon">.00</div>
 </div>
<!--表单内元素进行水平排列-->
 <form class="form-horizontal">
     <div class="form-group">
         <label class="col-sm-2 control-label">电子邮件</label>
         <div class="col-sm-10">
             <input type="email" class="form-control" placeholder="请输
入您的电子邮件">
         </div>
     </div>
 </form>
 <!--复选-->
 <div class="checkbox">
     <label>
         <input type="checkbox">体育
     </label>
 </div>
 <div class="checkbox">
     <label>
         <input type="checkbox">音乐
     </label>
 </div>
<!--单选框-->
 <div class="radio">
     <label>
         <input type="radio" name="sex">男
     </label>
     <label>
         <input type="radio" name="sex">女
     </label>
 </div>
<!--下拉列表-->
 <select class="form-control">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
 </select>
<!--状态校验-->
 <div class="form-group has-error">
     <label class="control-label">Input with success</label>
 </div>

<script type="javascript" src="js/jquery.min.js"></script>
<script type="javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
